<template>
  <div class="content">
    <div class="body">
      <!-- 公共资源分布示意图 -->
      <div style="width: 650px; height: 600px; margin-bottom: 10px">
        <!-- <div class="title">
          <img
            src="../../../assets/img/grovernance/moeny.png"
            height="20px"
            alt=""
          />
          <span>乡村积分</span>
        </div>
        <PaoPao /> -->
        <div class="title">
          <img
            src="../../../assets/img/grovernance/moeny.png"
            height="20px"
            alt=""
          />
          <span>乡村公共服务设施</span>
        </div>
        <heat-map-echarts height="580px" width="650px" />
      </div>

      <!-- roll地区医院表 -->
      <!-- <dv-border-box-10 style="padding: 5px; width: 650px">
        <div style="padding: 5px; width: 650px">
          <dv-scroll-board :config="airData" style="height: 302px" />
        </div>
      </dv-border-box-10> -->
      <div class="center-bottom">
        <div class="text">
          <div
            style="
              width: 0;
              height: 0;
              border-top: 5px solid transparent;
              border-bottom: 5px solid transparent;
              border-left: 10px solid;
              margin-right: 3px;
            "
          ></div>
          <span style="color: #bdffff">公共充电设施数量统计</span>
        </div>
        <!-- <Pie :values="20" ></Pie> -->
        <ul class="pie">
          <li>
            <Pie :values="20"></Pie>
            <span class="pie-text">充电设备总数: <span style="color: #fff; font-size: 20px;">50个</span> </span>
          </li>
          <li>
            <Pie :values="20"></Pie>
            <span class="pie-text">充电设备总数: <span style="color: #fff; font-size: 20px;">20个</span> </span>
          </li>
          <li>
            <Pie :values="30"></Pie>
            <span class="pie-text">充电设备总数: <span style="color: #fff; font-size: 20px;">30个</span> </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import heatMapEcharts from "./echarts/heatMapEcharts.vue";
// import {option} from '@/common/echart/pie-process.js'
// import Echart from "@/common/echart/index.vue";
import Pie from "@/common/echart/pie.vue";
export default {
  components: { Pie, heatMapEcharts },
  data() {
    return {
      timerId: null,
      config: {
        data: [["这是地震预警"], ["这是第二页"]],
        rowNum: 1,
        oddRowBGC: "none",
        evenRowBGC: "none",
      },

      airData: {
        header: ["地区", "医院", "图书馆", "学校"],
        data: [
          ["渝北区", "xxx医院", "nice图书馆", "good学校"],
          ["万州区", "xxx医院", "nice图书馆", "good学校"],
          ["巴南区", "xxx医院", "nice图书馆", "good学校"],
          ["江北区", "xxx医院", "nice图书馆", "good学校"],
          ["渝北区", "xxx医院", "nice图书馆", "good学校"],
          ["万州区", "xxx医院", "nice图书馆", "good学校"],
          ["巴南区", "xxx医院", "nice图书馆", "good学校"],
          ["江北区", "xxx医院", "nice图书馆", "good学校"],
        ],
      },
    };
  },
  // methods:{
  //   draw(){
  //     angle = angle + 3;
  //   }
  // },
  // mounted() {
  //   this.timerId = setInterval(()=>{
  //     this.draw()
  //   },100)
  //   if (this.timerId) {
  //     clearInterval(this.timerId)
  //   }
  // },
};
</script>

<style lang="scss" scoped>
.pie {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  height: 200px;
  margin-top: 40px;
  li {
    position: relative;
    height: 200px;
    width: 30%;
    text-align: center;
  }
  .pie-text {
    position: absolute;
    bottom: 0px;
    left: 18%;
    color: #5B8FE8;
  }
}
.title {
  height: 40px;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 10px;
  background: linear-gradient(90deg, #288ad6 0%, #09306c 100%);
  span {
    margin-left: 10px;
    font-size: 22px;
    color: #dcd58a;
    font-weight: bold;
  }
}
.text {
  display: flex;
  width: 200px;
  align-items: center;
  margin-bottom: 5px;
}
.content {
  width: 35%;
}
.head {
  padding: 10px;
  height: 80px;
  display: flex;
  align-items: center;
}
</style>
